<!-- 代签到 -->
<template>
  <div>
    <a-modal
      :maskClosable="false"
      title="请选择签到方式"
      centered
      width="50%"
      v-model="visible"
      @cancel="handleCancel"
    >
      <a-radio-group v-model="signType" @change="signTypeChange">
        <a-radio :value="1">本人已到现场签到</a-radio>
        <a-radio :value="2">其他人代参加活动</a-radio>
      </a-radio-group>
      <div v-if="signType === 2" class="_mt-20">
        <a-form-model ref="form" :model="form" :label-col="{ span: 5 }" :wrapper-col="{ span: 12 }">
          <a-form-model-item label="代签人">
            <a-input v-model="form.replaceSignPersonName" placeholder="请输入代参与人姓名" allowClear />
          </a-form-model-item>
          <a-form-model-item label="手机号">
            <a-input v-model="form.replaceSignPersonPhone" placeholder="请输入代参与人手机号" allowClear />
          </a-form-model-item>
          <a-form-model-item label="单位名称">
            <a-input v-model="form.replaceSignCompanyName" placeholder="请输入任职的单位" allowClear />
          </a-form-model-item>
          <a-form-model-item label="单位职务">
            <a-input v-model="form.replaceSignCompanyPosition" placeholder="请输入任职的单位职务" allowClear />
          </a-form-model-item>
        </a-form-model>
      </div>

      <div class="_mt-20">
        <a-checkbox v-model="isPrint">是否需要打印</a-checkbox>
      </div>
      <PrintDeviceSelect :activityId="activityId" :disabled="!isPrint" @change="printDeviceChange" />

      <template slot="footer">
        <a-button class="cancel" @click="handleCancel">取消</a-button>
        <a-button type="primary" @click="handleConfirm">确定</a-button>
      </template>
    </a-modal>
  </div>
</template>

<script>
import PrintDeviceSelect from '../printBadge/printDeviceSelect.vue'

import { replaceSign, printChestCard } from '@/api/activity/enroll'
export default {
  props: {
    //报名ID
    registerId: {
      type: Number
    },
    //报名人姓名
    registerName: {
      type: String
    },
    //活动id
    activityId: {
      type: String | Number
    }
  },
  components: {
    PrintDeviceSelect
  },
  data() {
    return {
      visible: false,
      signType: 1,
      form: {
        replaceSignPersonName: '',
        replaceSignPersonPhone: '',
        replaceSignCompanyName: '',
        replaceSignCompanyPosition: ''
      },
      formCache: null,
      registerUser: null,
      currentPrintDevice: undefined,
      isPrint: true
    }
  },
  methods: {
    moduleShow(registerUser) {
      this.signType = 1
      if (
        registerUser.replaceSignCompanyName ||
        registerUser.replaceSignCompanyPosition ||
        registerUser.replaceSignPersonName ||
        registerUser.replaceSignPersonPhone
      ) {
        Object.keys(registerUser).forEach(k => {
          this.form[k] = undefined
        })
      } else {
        registerUser = {
          replaceSignPersonName: registerUser.personName,
          replaceSignPersonPhone: registerUser.personTel,
          replaceSignCompanyName: registerUser.companyName,
          replaceSignCompanyPosition: registerUser.companyPosition
        }
        this.registerUser = registerUser
        this.setFormValues(registerUser)
      }

      this.visible = true
    },
    signTypeChange(e) {
      if (e.target.value === 2) {
        this.setFormValues(this.formCache)
      } else {
        this.formCache = JSON.parse(JSON.stringify(this.form))
        this.setFormValues(this.registerUser)
      }
    },
    setFormValues(values) {
      if (values) {
        this.form.replaceSignPersonName = values.replaceSignPersonName
        this.form.replaceSignPersonPhone = values.replaceSignPersonPhone
        this.form.replaceSignCompanyName = values.replaceSignCompanyName
        this.form.replaceSignCompanyPosition = values.replaceSignCompanyPosition
      } else {
        Object.keys(this.form).forEach(k => {
          this.form[k] = undefined
        })
      }
    },
    handleCancel() {
      this.visible = false
    },
    printDeviceChange(item){
      this.currentPrintDevice = item;
    },
    async handleConfirm() {
      let params = {}
      if (this.signType === 2) {
        params = this.form
      }
      await replaceSign({
        id: this.registerId,
        signType: this.signType,
        ...params
      })

      //需要打印胸卡
      if (this.isPrint) {
        if (!this.currentPrintDevice) return this.$message.warning('请选择打印设备')
        await printChestCard({
          equipmentNumber: this.currentPrintDevice.printerNo,
          deviceId: this.currentPrintDevice.id,
          activityId: this.activityId,
          registerId: this.registerId,
          signType: this.signType
        })
      }

      this.$message.success('操作成功')

      this.$emit('signSuccess')
      this.handleCancel()
    }
  }
}
</script>
<style scoped>
.cancel {
  margin-right: 10px;
}
</style>
